<template>
    <div class="management">
        <tmpHeader :index="2"/>
        <h2 class="tit">“{{nick}}”公众号</h2>
        <div class="main">
            <p class="title">公众号相关功能参数配置</p>
            <Row class="content">
                <Col span="8">
                    <!-- 功能管理 -->
                    <div class="box1">
                        <div class = 'wrapper' v-for="(item,index) in list"
                        :key="index">
                            <span class ='name'>{{ item.title }}：</span>
                            <iSwitch size="large" v-model="item.status">
                                <span slot="open">开启</span>
                                <span slot="close">关闭</span>
                            </iSwitch>
                        </div>
                        <p class="zhushi">（备注：上传图片识别文字功能。）</p>
                    </div>
                    <!-- 电子健康卡设置 -->
                    <div class="box4">
                        <div class = 'wrapper' v-for="(item,index) in electronlist"
                            :key="index">
                            <span class ='name'>{{ item.title }}：</span>
                            <iSwitch size="large" v-model="item.status">
                                <span slot="open">开启</span>
                                <span slot="close">关闭</span>
                            </iSwitch>
                        </div>
                    </div>

                </Col>
                <Col span="8">
                    <!-- 预约挂号设置 -->
                    <div class="box1">
                        <div class = 'wrapper' v-for="(item,index) in appointlist"
                            :key="index">
                            <span class ='name'>{{ item.title }}：</span>
                            <iSwitch size="large" v-model="item.status">
                                <span slot="open">开启</span>
                                <span slot="close">关闭</span>
                            </iSwitch>
                        </div>
                    </div>
                    <!-- 就诊卡管理设置 -->
                    <div class = 'wrapper' v-for="(item,index) in Cutlist"
                        :key="index">
                        <span class ='name'>{{ item.title }}：</span>
                        <iSwitch size="large" v-model="item.status">
                            <span slot="open">开启</span>
                            <span slot="close">关闭</span>
                        </iSwitch>
                    </div>
                    <!-- <p class="zhushi">（备注：开启后，必须绑定机构就诊卡方可使用平台相关功能。）</p> -->
                </Col>
                <Col span="8">
                    <div >
                        <div class = 'wrapper'>
                            <span class ='name'>注册页面LOGO上传：</span>
                            <div class="input">
                                <div class="demo-upload-list" v-for="(item,index) in uploadList" :key="index">
                                <div v-if="item.status === 'finished'">
                                    <img :src="item.url" />
                                    <div class="demo-upload-list-cover">
                                    <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
                                    <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
                                    </div>
                                </div>
                                <div v-else>
                                    <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                                </div>
                                </div>
                                <Upload
                                    v-show="uploadList.length ==0"
                                    ref="upload"
                                    :show-upload-list="false"
                                    :default-file-list="defaultList"
                                    :on-success="handleSuccess"
                                    :format="['jpg','jpeg','png']"
                                    :max-size="2000"
                                    :on-format-error="handleFormatError"
                                    :on-exceeded-size="handleMaxSize"
                                    :before-upload="handleBeforeUpload"
                                    multiple
                                    type="drag"
                                    :action="uploadUrl"
                                    :headers="fromData"
                                    :data="uploadData"
                                    class="uploadpic"
                                >
                                <div class="pic">
                                    <Icon type="ios-camera" size="20"></Icon>
                                </div>
                                </Upload>
                                <Modal title="预览图片" v-model="visible" footer-hide>
                                    <img :src=" uploadList[0].url " v-if="visible" class="picture" />
                                </Modal>
                            </div>
                        </div>
                        <p class="zhushi">（备注：图片支持.jpg\.jpeg\.png格式，建议尺寸150*150大小不超过2000kb）</p>
                    </div>
                    <!-- 电子医保险卡显示 -->
                    <div class = 'wrapper' v-for="(item,index) in medicalist"
                        :key="index">
                        <span class ='name'>{{ item.title }}：</span>
                        <iSwitch size="large" v-model="item.status">
                            <span slot="open">开启</span>
                            <span slot="close">关闭</span>
                        </iSwitch>
                    </div>
                    <!-- 公众号是否支持切换机构 -->
                    <!-- <div class = 'wrapper' v-for="(item,index) in changeOrglist"
                        :key="index">
                        <span class ='name'>{{ item.title }}：</span>
                        <iSwitch size="large" v-model="item.status">
                            <span slot="open">开启</span>
                            <span slot="close">关闭</span>
                        </iSwitch>
                    </div>
                    <p class="zhushi">（备注：建议独立机构关闭此功能。）</p>     -->
                    <!-- 就诊卡充值设置 -->
                    <!-- <div class = 'wrapper' v-for="(item,index) in Seelist"
                        :key="index">
                        <span class ='name'>{{ item.title }}：</span>
                        <iSwitch size="large" v-model="item.status">
                            <span slot="open">开启</span>
                            <span slot="close">关闭</span>
                        </iSwitch>
                    </div>
                    <p class="zhushi">（备注：就诊卡是否具有储值功能。）</p> -->
                </Col>
            </Row>
            <p class="title">公众号诊疗服务页面样式</p>
                <RadioGroup v-model="pagestyle" class="RadioStyle">
                    <div>
                        <Radio :value="0" :label="0">不显示"诊疗服务"</Radio>
                    </div>
                    <div>
                        <Radio :value="1" :label="1">全量版式</Radio>
                        <img src="../../../../assets/images/totalAmount.png" alt="" title="点击查看大图" @click='lookImg(1)'>
                    </div>
                    <div>
                        <Radio :value="2" :label="2">自定义版式</Radio>
                        <img src="../../../../assets/images/customize.png" alt="" title="点击查看大图" @click='lookImg(2)'>
                    </div>
                </RadioGroup>
        </div>
        <Row type="flex" justify="space-around" class="code-row-bg">
            <Col span="4">
                <Button type="primary" @click="save" class="btn">
                    <Icon type="ios-checkmark icon" />保存
                </Button>
                <Button @click="back" class="btn">
					<i class = "iconfont icon-butongyi icon"></i>取消
				</Button>
            </Col>
        </Row>
        <Modal title="诊疗服务版式" v-model="modal2" width="400" footer-hide>
            <img src="../../../../assets/images/totalAmount.png" alt="" v-if="zlfwImg == 1" style='display:block;height: 750px;width:100%;'>
            <img src="../../../../assets/images/customize.png" alt="" v-if="zlfwImg == 2" style='display:block;width:100%;height: 750px;'>
        </Modal>
    </div>
</template>
<script>
import code from "@/configs/base.js";
import api from "@/api/commonApi";
import tmpHeader from "../tmpHeader";
import aesUtils from "@/plugins/aes-utils.js";
import fourLevelLinkage from "@/components/fourLevelLinkage";
import store from "@/store";
export default {
    components: {
        tmpHeader,
        fourLevelLinkage
    },
    data() {
        return {
            appid: "",
            list: [
                {
                    title: "OCR管理",
                    status: false
                }
            ],
            appointlist: [
                {
                    title: "预约挂号详情页面二维码",
                    status: false
                }
            ],
            electronlist: [
                {
                    title: "电子健康卡显示",
                    status: false
                }
            ],
            changeOrglist: [
                {
                    title: "公众号是否支持切换机构",
                    status: false
                }
            ],
            Seelist: [
                {
                    title: "就诊卡充值显示",
                    status: false
                }
            ],
            medicalist: [
                {
                    title: "电子医保险卡显示",
                    status: false
                }
            ],
            Cutlist:[
                {
                    title: "就诊卡管理显示",
                    status: false
                }
            ],
            showVal:"",
            showList: ['不显示','显示正常菜单','显示灰色菜单'],
            doctorList: ['默认随机','患者评分','接诊量','自定义'],
            mengentList:['单体机构','多个机构'],
            params: {
                // 首页医生显示数量
                doctorShowNumber: "",
                // 医生显示规则
                doctorVal:"",
                // 公众号承载机构类型
                mengentType:""
            },
            visible:false,
            uploadList: [],
            id: "",
            uploadModal: true,
            uploadData: { json: '{"urlCode":"' + code.urlCode.appLogo + '"}' },
            activeUploadId: "5c2bf345-b973-4ffd-a52e-87bb9c1d2b72",
            uploadUrl: api.fileAll,
            images: "",
            sourceImages: "",
            nick: '',
            pagestyle: 0,
            modal2:false,
            zlfwImg: '',
        };
    },
    created() {
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/publicOperation/publicAddress/home",
                title: "公众号运营"
            }
        ];
        this.$emit("changeBreadList", breadList);
        this.nick = localStorage.getItem("nick");
        let iv = store.state.iv;
        let salt = store.state.salt;
        this.appid = aesUtils.decrypt(
            salt,
            iv,
            "wxAppid",
            localStorage.getItem("appid")
        );
    },
    mounted() {
        //根据appid获取公众号功能配置
        this.$axios
            .post(api.findWxFunction, {
                appid: this.appid
            })
            .then(res => {
                if (res.data.code) {
                    let ret = res.data.object;
                    // OCR管理状态
                    this.list[0].status = Boolean(ret.ocrStatus);
                    this.appointlist[0].status = Boolean(ret.ghqr);
                    this.electronlist[0].status = Boolean(ret.dzjkk);
                    this.changeOrglist[0].status = Boolean(ret.changeOrg);
                    this.Seelist[0].status = Boolean(ret.jzkcz);
                    this.medicalist[0].status = Boolean(ret.ybk);
                    this.Cutlist[0].status = Boolean(ret.jzkgl);
                    // 是否显示菜单
                    this.showVal = Number(ret.showmenu)
                    this.pagestyle = ret.pagestyle ? Number(ret.pagestyle) : 0;
                    if (ret.appLogo) {
                        this.sourceImages = ret.appLogo;
                        this.uploadList.push({
                            name: "a42bdcc1178e62b4694c830f028db5c0",
                            percentage: 100,
                            status: "finished",
                            uid: 1544263544971,
                            url: this.fileBaseUrl + this.pictureFormat(ret.appLogo)
                        });
                    }
                } else {
                    this.$Message.error("请求失败,请稍候重试");
                }
            });
        this.uploadList = this.$refs.upload.fileList;
    },
    methods: {
        lookImg(val) {
            this.modal2 = true
            this.zlfwImg = val
        },
        // 保存修改公众号功能配置
        save() {
            let images = "";
            if (this.images != "") {
                images = this.images;
            } else if (this.sourceImages != "" && this.uploadList.length) {
                images = this.sourceImages;
                // 默认
            } else {
                images = "";
            }
            let params = {
                appid: this.appid,
                // OCR管理状态
                ocrStatus: Number(this.list[0].status),
                ghqr: Number(this.appointlist[0].status),
                dzjkk: Number(this.electronlist[0].status),
                changeOrg: Number(this.changeOrglist[0].status),
                jzkcz: Number(this.Seelist[0].status),
                ybk: Number(this.medicalist[0].status),
                jzkgl: Number(this.Cutlist[0].status),
                appLogo:images,
                pagestyle: this.pagestyle,
            };
            this.$axios.post(api.saveWxFunction,params).then(res => {
                if (res.data.code) {
                    let ret = res.data.data;
                    this.$Message.info("修改成功");
                } else {
                    this.$Message.error("修改失败,请重试");
                }
            });
        },
        handleView(name) {
            this.imgName = name;
            this.visible = true;
        },
        handleRemove(file) {
            const fileList = this.$refs.upload.fileList;
            this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
        },
        handleSuccess(res, file) {
            res = this.uploadFileDecrypt(res);
            file.url = this.fileBaseUrl + res.object[0].fileName;
            this.images = JSON.stringify(res.object[0]);
            file.name = res.object[0].fileName;
        },
        handleFormatError(file) {
            this.$Notice.warning({
                title: "上传失败",
                desc: "文件格式错误"
            });
        },
        handleMaxSize(file) {
            this.$Notice.warning({
                title: "文件过大",
                desc: `文件${file.name}过大，文件最大限制为2000KB`
            });
        },
        handleBeforeUpload(file) {
            const check = this.uploadList.length < 1;
            if (!check) {
                this.$Message.info("只能上传一张图片");
            }
            return check;
        },
        // 返回
		back() {
			let pageNo = this.$route.query.pageNo;
			// FUNCTIONJS公用 跳转方法
			this.functionJS.queryNavgationTo(this, "/index/publicOperation/publicAddress/home", {
				pageNo
			});
		},
    },
};
</script>
<style lang="less" scoped>
.management {
    width: calc(100% );
    padding: 10px 30px;
    margin: 0 auto;
    background: #fff;
    .code-row-bg {
        margin: 30px 0;
        .icon {
            margin-right: 5px;
            font-size: 14px;
        }
    }
    .tit {
		margin: 15px 0;
		font-weight: bold;
		text-align: center;
		color: #333
	}
    .main{
        margin: 20px;
		padding-bottom: 30px;
		border: 1px solid #f0f0f0;
		box-shadow: 0 4px 3px #ebedf8;
		border-radius: 5px;
        .title {
			font-size: 18px;
			padding-left: 15px;
			margin-bottom: 20px;
			color: #333;
			height: 40px;
			line-height: 40px;
			background: #ebedf8;
		}
        .content {
            padding: 0 20px;
            .box1 {
                height: 101px;
            }
            .box4 {
                height: 60px;
            }
            .zhushi {
                color: #ff9966;
            }
        }
        .RadioStyle {
            display: flex;
            padding: 0 20px;
            div {
                width: 33.33%;
            }
            img {
                width: 70px;
                height: 120px;
                vertical-align: top;
            }
        }
    }
    .wrapper{
        width:100%;
        height:auto;
        display:flex;
        flex-direction:row;
        padding:0 10px;
        margin:15px 0;
    }
    .uploadpic {
        display: inline-block;
        width: 58px;
        .pic{
            width: 58px;
            height: 58px;
            line-height: 58px;
        }
    }
    .demo-upload-list {
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        margin-right: 4px;
    }
    .demo-upload-list img {
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover {
        display: block;
    }
    .demo-upload-list-cover i {
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
    .btn {
        width: 80px;
        height: 35px;
    }
}
.picture {
    width: 100%;
}
</style>
